<template>
	<div class="sw_system_container">
		<div class="sw_query_form" v-if="isRadioGroup">
			<div class="button">
				<el-radio-group v-model="compType" size="small">
					<el-radio-button label="1">列表</el-radio-button>
					<el-radio-button label="2">图表</el-radio-button>
				</el-radio-group>
			</div>
		</div>
		<template v-if="compType === '1'">
			<div class="sw_table_container">
				<el-table size="medium" :data="tableData" stripe height="100%" class="index_table_wrapper">
					<el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
					<el-table-column label="反馈满意度" min-width="180">
						<template slot-scope="{ row }">
							<el-rate v-model="row.filed1" show-text disabled></el-rate>
						</template>
					</el-table-column>
					<el-table-column prop="userName" label="反馈人" min-width="100"></el-table-column>
					<el-table-column prop="createTime" label="反馈时间" min-width="160"></el-table-column>
					<el-table-column label="操作" width="100" v-if="$isHasAuth(tableButton)">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" v-hasPermi="'85ef0f2b19ab44f48091269c76b8606a'" @click="handleLookDetail(row)">详情</el-button>
							<el-button size="medium" type="text" v-hasPermi="'5bac10877dc048c0aeafb7dbfbac85be'" @click="handleDeleteData(row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<template v-if="dataCount > 0">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
			</template>
			<data-detail v-model="detailDialog" :data="detailData"></data-detail>
		</template>
		<feedback-chart v-if="compType === '2'"></feedback-chart>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import dataDetail from './detail';
import feedbackChart from './chart';
import { queryFeedbackPageList, deleteFeedback } from '@/api/system/sysFeedback';
export default {
	components: { dataDetail, feedbackChart },
	data() {
		return {
			loading: false,
			compType: '1',
			dataCount: 0,
			queryData: {
				page: 1,
				limit: 15
			},
			tableData: [],
			detailData: {},
			detailDialog: false
		};
	},
	computed: {
		...mapGetters(['authButton']),
		topButton() {
			return ['499517b5940f452496b7c8d43fcb7ec6', 'd32d5d79b0124950b5cfef6f0614155b'];
		},
		tableButton() {
			return ['85ef0f2b19ab44f48091269c76b8606a', '5bac10877dc048c0aeafb7dbfbac85be'];
		},
		isRadioGroup() {
			let flagArr = this.topButton.map((item) => this.authButton.some((n) => n.id === item));
			return flagArr.filter((n) => !!n).length === flagArr.length;
		}
	},
	watch: {
		isRadioGroup: {
			handler(flag) {
				if (!flag) {
					if (this.authButton.some((n) => n.id === '499517b5940f452496b7c8d43fcb7ec6')) {
						this.compType = '1';
						this.queryTableData();
					} else if (this.authButton.some((n) => n.id === 'd32d5d79b0124950b5cfef6f0614155b')) {
						this.compType = '2';
					}
				} else {
					this.queryTableData();
				}
			},
			immediate: true
		}
	},
	methods: {
		//获取表格数据
		async getTabelData() {
			let params = { ...this.queryData };
			let result = await queryFeedbackPageList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.dataCount = parseInt(result.count);
				this.tableData = datas.map((item) => {
					let obj = { ...item };
					obj['filed1'] = Number(obj.filed1);
					obj['userName'] = item.sysUser.userName;
					return obj;
				});
			}
		},

		//查询表格数据
		queryTableData() {
			this.loading = true;
			this.getTabelData();
		},

		//删除数据
		handleDeleteData(row) {
			let that = this;
			that.$confirm(`此操作将删除反馈数据, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除数据请求
		async deleteDataRequest(row) {
			let result = await deleteFeedback(row.id).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.$showCustomMessage('success', `删除反馈成功`);
				this.$store.dispatch('getOpenDictData');
			}
		},

		handleLookDetail(data) {
			this.detailData = { ...data };
			this.detailDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_system_container {
	.sw_query_form {
		justify-content: flex-end;
	}
	&:deep(.el-rate) {
		height: 24px;
	}
	&:deep(.el-rate__icon) {
		font-size: 24px;
	}
	&:deep(.el-rate__text) {
		font-size: 16px;
	}
}
</style>
